<script setup lang="ts">
import message from 'vc/src/common/message';
import { setHrefUrlTool, timeTrans, toF9 } from '../../../../utils';
import { addCollection, removeCollection } from '../../../modules/other/apis';
import { getCollection } from '../../apis/profile';

const PAGE_SIZE = 15;
let pageNum = $ref(0);

let isTurnPage = $ref(false);

let listData = ref([]);
const { data, run, loading } = useRequest(getCollection, {
  defaultParams: [{ limit: PAGE_SIZE, offset: pageNum }],
  onSuccess: (res => {
    if (res.items?.length) {
      listData.value = listData.value.concat(res.items);
    }
    isTurnPage = false;
  })
});

onActivated(() => {
  console.log(1212312);
  pageNum = 0
  listData.value = []
  run({ limit: PAGE_SIZE, offset: pageNum });
});

const collect = (item) => {
  if (!item.follow) {
    item.follow = !item.follow;
    addCollection({ newId: item.id }).then((res) => {
      if (res) {
        message.success({
          message: '已添加收藏',
          duration: 2000
        });
      }
    });
  } else {
    item.follow = !item.follow;
    removeCollection({ newId: item.id }).then((res) => {
      listData.value = listData.value.filter(subitem => {
        return subitem.id !== item.id;
      });
      if (res) {
        message.success({
          message: '已取消收藏',
          duration: 2000
        });
      }
    });
  }
};

const scrollContent = ref();

let dom = $ref(null);
nextTick(() => {
  dom = document.getElementsByClassName('layout-content')?.[0];
});

function onReachBottom () {
  pageNum++;
  isTurnPage = true;
  run({
    limit: PAGE_SIZE, offset: pageNum
  });
}
</script>

<template>
  <div v-if="loading && !isTurnPage" v-spin="loading">
   <div class="min-h-300px"/>
  </div>
  <div v-else>
    <div class="contentNews" v-if="listData?.length" ref="scrollContent">
      <ul>
        <li v-for="(item, index) in listData" :key="index" class="item">
          <p class="cursor-pointer line-clamp-2 title"
            @click="setHrefUrlTool(item.fileType, item.fileUrl, item.id, item.bizType)">{{ item.title }}</p>
          <div class="tag">
            <div>
          <span
            class="source cursor-pointer"
            v-if="item.parties?.length"
            @click="toF9(item.parties[0].companyId)"
          >{{ item.parties[0].companyShortName || item.parties[0].companyName }}</span>
              <template v-if="item.labels?.length">
        	 <span
             class="source" :style="{background: sub_item.bgColor, color: sub_item.color}"
             v-for="(sub_item, sub_index) in item.labels"
             :key="sub_index">{{ sub_item.name }}</span>
              </template>
            </div>
          </div>
          <div class="flex justify-between mt-10px">
            <div class="text-[#999] text-12px">
              <span class="date">{{ timeTrans(item.date) }}</span>
              <span v-if="item.source" class="date"> · {{ item.source }}</span>
            </div>
            <div class="flex">
              <div v-if="item.id" class="collect" :class="{active:item.follow}"
                @click="collect(item)">
            <span v-if="item.follow"><span
              class="icon vicon vi-pingjiaxingxing" /><span>已收藏</span></span>
                <span v-else><span class="icon vicon vi-xingxing" /><span>收藏</span></span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <vc-list-status
        :len="PAGE_SIZE"
        :total="data.total"
        :dom="dom"
        loadingSpin=".contentNews"
        :showScreenLoading="false"
        @reach="onReachBottom"
      />
    </div>
   
    <vc-nodata v-else :type="101" />
  </div>
</template>

<style lang="scss" scoped>
.item {
  min-height: 90px;
  padding: 12px 0px;
  margin: 0 33px;
  border-bottom: 1px solid #F3F3F3;

  .title {
    color: #333;
    font-weight: 400;
    font-size: 16px;
    transition: 0.2s all;

    &:hover {
      color: #008EF4;
    }
  }

  .tag {
    margin-top: 12px;

    .source {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #008EF4;
      padding: 0 5px;
      background: rgba(0, 142, 244, 0.1);
      border-radius: 2px;
      display: inline-block;
      margin-right: 5px;
    }
  }

  .collect {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;

    .icon {
      margin-right: 6px;
      font-size: 14px;
    }

    &:hover {
      color: #FF8F32;
    }

    &.active {
      color: #FF8F32;
    }
  }

}
</style>
